<!DOCTYPE html>
<html lang="en"><html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>c测试</title>
    <script type="text/javascript" src="https://cdn-hangzhou.goeasy.io/goeasy.js"></script>
    <script type="text/javascript" src="https://cdn.goeasy.io/goeasy-1.0.3.js"></script>

    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/bootstrap-theme.min.css">
    <link rel="stylesheet" href="/css/communtiy.css">
    <script src="https://www.jq22.com/jquery/jquery-3.3.1.js"></script>
    <script src="/js/bootstrap.min.js" type="application/javascript"></script>
    <script src="/js/moment.js" type="application/javascript"></script>
    <!--表情插件-->
    <script type="text/javascript" src="/js/jquery.emoji.js"></script>

</head>

<body>
<div th:insert="~{navaigation::nav}"></div>
<input type="hidden" th:value="${staues}" id="getHide">
<input type="hidden" th:value="${session.user.getId()}" id="getCurrentId">
<input type="hidden" th:value="${friednToken}" id="friednToken">

<div class="container-fluid main" style="background: #edede2">
    <div class="row">
        <div class="col-lg-3 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <span class="web_thems glyphicon glyphicon-user"aria-hidden="true">我的好友</span>
                </div>
                <hr  class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                <div class="div_scroll col-lg-12 col-md-12 col-sm-12 col-xs-12" style="overflow-x: hidden;height: 600px;background:#f3f3ed" >
                    <a href="/webscort" style="color: black;font-size: 20px;">群聊</a>
                    <div th:if="${addFriendsUserList.size()!=0}" th:each="addFriends:${addFriendsUserList}" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="media" style="margin-top: 30px;">
                            <div class="media-left">
                                <a href="#">
                                    <img class="media-object img-circle" th:src="${addFriends.getUsers().getAvatarUrl()}" style="width: 40px;height: 40px;">
                                </a>
                            </div>

                                <div class="media-body">
                                    <a th:href="@{'/webscort/'(chioce=${addFriends.getUsers().getToken()})}" style="color: black">
                                        <h4 class="media-heading" th:text="${addFriends.getUsers().getName()}"></h4>
                                            显示该好友的最后一条聊天信息
                                    </a>
                                </div>

                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--聊天内容和成员-->
        <div class="col-lg-9 col-md-12 col-sm-12 col-xs-12">
            <div class="col-lg-8 col-md-12 col-sm-12 col-xs-12" >
                <span th:if="${communtiyTitle=='交流社区'}" class="web_thems"aria-hidden="true"style="margin-left:250px;" th:text="${communtiyTitle+'('+countUsers+'人)'}"></span>
                <span th:if="${communtiyTitle!='交流社区'}" class="web_thems"aria-hidden="true"style="margin-left:250px;" th:text="${communtiyTitle}"></span>

                <span style="color: gray">(任何形式聊天记录只存最近一百条)</span>
                <hr  class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <!---聊天内容显示-->
                <div  id="calm" class="div_scroll col-lg-12 col-md-12 col-sm-12 col-xs-12" style="overflow-x: hidden;height: 450px;background: #f3f3ed" >
                    <!--回显示内容-->
                    <div id="self" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                    </div>


                </div>
                <hr  class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                <!---发送信息-->
                <div  class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                    <!--他人消息-->
                    <div id="chatbox col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div id="emoji" >😄</div>
                        <div id="send">发送</div>

                        <textarea cols="100" rows="50" id="content" style="width: 100%;height:100px;resize: none;overflow:auto;" placeholder="由于服务器内存小,暂时不支持图片发送"></textarea>

                    </div>
                </div>
            </div>

            <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12" >
                <span class="web_thems glyphicon glyphicon-user"aria-hidden="true" >所有会员(以注册时间优先显示)</span>
                <hr  class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                <div  class="div_scroll col-lg-12 col-md-12 col-sm-12 col-xs-12" style="overflow-x: hidden;height: 600px;background: #f3f3ed" >
                    <div th:each="userAll:${usersList}" class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <div class="media">
                            <div class="media-left">
                                <a th:href="${'/othermes/'+userAll.getId()}">
                                    <img class="media-object img-circle" th:src="${userAll.getAvatarUrl()}" style="width: 40px;height: 40px;">
                                </a>
                            </div>
                            <div class="media-body">
                                <h4 class="media-heading">
                                    <span aria-hidden="true" style="color: #9b9b6a" class="glyphicon glyphicon-user replies" th:text="${userAll.getName()}"></span>
                                </h4>
                                <span th:text="${'Lv:'+userAll.getLeave()}" style="font-size: 10px;margin-top: 5px;" ></span>
                                <span th:text="${'加入时间：:'+#dates.format(userAll.getGmt_create(),'yyyy-MM-dd')}" style="font-size: 10px;margin-top: 5px;" class="glyphicon glyphicon-time" aria-hidden="true"></span>
                            </div>
                        </div>
                        <hr  class="col-lg-12 col-md-12 col-sm-12 col-xs-12">

                    </div>

                </div>
            </div>



            <!--聊天成员-->

        </div>
    </div>
</div>
</body>

<script type="text/javascript">

        //进入页面直接来去上次群里的聊天记录
         var str1 = $("input:hidden[id='getHide']").val();//当前用户的选择聊天状态
        var currentId = $("input:hidden[id='getCurrentId']").val();//当前用户的id
        var  friednToken=$("input:hidden[id='friednToken']").val();//当前好友的token
        console.log("friednToken:"+friednToken+str1+currentId);
        //
        $.get("/showCommuntiy",{"staues":str1,"friednToken":friednToken},function (data) {
            if(friednToken!=""){
                console.log("token不为空")
                for(var i=0;i<data.length;i+=2){
                    // content = replace_em(data[i].content); //可以设计从数据库解析出来的表情
                    if(currentId==data[i].users.id ){
                        $("#self").before(
                            " <div class='media'>" +
                            "<div class='media-left'style='float: right'>" +
                            "<a href='/othermes/"+data[i].users.id+"'>  <img class='media-object img-circle' src='"+data[i].users.avatarUrl+"' style='width: 40px;height: 40px;'></a>" +
                            "</div><div class='media-body'> <h4 class='media-heading' style='float: right;margin-top: 10px;'>"+data[i].content+"</h4></div>" +
                            "</div>")
                    }else if(currentId!=data[i].users.id){
                        $("#self").before("<div class='media'><div class='media-left'><a href='/othermes/"+data[i].users.id+"'><img  class='media-object img-circle' style='width: 40px;height: 40px;'src='"+data[i].users.avatarUrl+"'></a></div>" +
                            " <div class='media-body'> <h4 class='media-heading'>"+data[i].content+"</h4>" +
                            "" +
                            "<span  style='font-size: 10px;color: gray;margin-right: 465px;' class='pull-right'>"+"用户："+data[i].users.name+"——时间："+moment(data[i].gmt_create).calendar()+"</span></div></div>");

                    }
                }

            }else {
                console.log("token空")
                for(var i=0;i<data.length;i++){
                    // content = replace_em(data[i].content); //可以设计从数据库解析出来的表情
                    if(currentId==data[i].users.id ){
                        $("#self").before(
                            " <div class='media'>" +
                            "<div class='media-left'style='float: right'>" +
                            "<a href='/othermes/"+data[i].users.id+"'>  <img class='media-object img-circle' src='"+data[i].users.avatarUrl+"' style='width: 40px;height: 40px;'></a>" +
                            "</div><div class='media-body'> <h4 class='media-heading' style='float: right;margin-top: 10px;'>"+data[i].content+"</h4></div>" +
                            "</div>")
                    }else if(currentId!=data[i].users.id){
                        $("#self").before("<div class='media'><div class='media-left'><a href='/othermes/"+data[i].users.id+"'><img  class='media-object img-circle' style='width: 40px;height: 40px;'src='"+data[i].users.avatarUrl+"'></a></div>" +
                            " <div class='media-body'> <h4 class='media-heading'>"+data[i].content+"</h4>" +
                            "" +
                            "<span  style='font-size: 10px;color: gray;margin-right: 465px;' class='pull-right'>"+"用户："+data[i].users.name+"——时间："+moment(data[i].gmt_create).calendar()+"</span></div></div>");

                    }
                }

            }
            //开始回显示数据
            ScrollDiv();//自动定位滚动条
        })

        //自动定位滚动条
        function ScrollDiv() {
            var ex = document.getElementById("calm"); ex.scrollTop = ex.scrollHeight;
        }

    //webscort接受
    var goeasy = new GoEasy({
        host:'hangzhou.goeasy.io',
        appkey: 'BC-a08e601904a34f429a0241e959bef29a'
    });
    goeasy.subscribe({
        channel: 'demo',
        onMessage: function(message){
            var contents=message.content;
            var obj = JSON.parse(contents);
            //将字符串转换json
            console.log(obj);
            //判断当前的用户id是否与发信息id一直，一直就在右飘忽，不一致就左边

           if(currentId==obj.users.id){

              $("#self").before(
                  " <div class='media'>" +
                  "<div class='media-left'style='float: right'>" +
                  "<a href='/othermes/"+obj.users.id+"'>  <img class='media-object img-circle' src='"+obj.users.avatarUrl+"' style='width: 40px;height: 40px;'></a>" +
                  "</div><div class='media-body'> <h4 class='media-heading' style='float: right;margin-top: 10px;'>"+obj.content+"</h4></div>" +
                  "</div>")

           }else{
                $("#self").before("<div class='media'><div class='media-left'><a href='/othermes/"+obj.users.id+"'> <img  class='media-object img-circle' style='width: 40px;height: 40px;'src='"+obj.users.avatarUrl+"'></a></div>" +
                    " <div class='media-body'> <h4 class='media-heading'>"+obj.content+"</h4>" +
                    "" +
                    "<span style='font-size: 10px;color: gray;margin-right: 465px;' class='pull-right'>"+"用户:"+obj.users.name+"——时间:"+moment(obj.gmt_create).calendar()+"</span></div></div>");

            }
            ScrollDiv();//自动定位滚动条
            $("#content").val("");

        }
    });
//表情
    $(function(){

        /*表情初始化
          content_el: 输入框的位置
                list: 下的属性详解
                    name		-- 分类名称
                    code 		-- 分类的表情编码，与其他分类不可重复
                    path 		-- 图片路径
                    suffix		-- 图片的后缀
                    max_number	-- 图片的最大个数
        */
        $("#emoji").emoji({content_el:"#content",
            list:[
                {
                    name:"QQ表情",
                    code:"qq_",
                    path:"/face/emoji1/",
                    suffix:".gif",
                    max_number:25
                },
                {
                    name:"emoji",
                    code:"em_",
                    path:"/face/emoji2/",
                    suffix:".png",
                    max_number:22
                }
                ,
                {
                    name:"其他",
                    code:"other_",
                    path:"/face/emoji3/",
                    suffix:".png",
                    max_number:1
                }
            ]
        });

        //这里写上ajax请求。并且判断是被人发送的
        $("#send").click(function(){

            var content = $("#content").val();
            if(content==null || content==""){
                alert("请输入内容")
                return false;
            }
            content = replace_em(content); //可以设计从数据库解析出来的表情
          /*  $("#result").append(content+"<br><br><br>");
            $("#content").val("");*/


            //发送ajax持久化（先展示用户的信息之后，在像他人展示永固发送的）
            $.get("/webCommuntiy",{"content":content,"str1":str1,"friednToken":friednToken},function (data) {
                console.log(data)
            });


        });
    })

    //表情格式替换
    function replace_em(str){
        str = str.replace(/\</g,'&lt;');
        str = str.replace(/\>/g,'&gt;');
        str = str.replace(/\n/g,'<br/>');
        str = str.replace(/\[qq_([0-9]*)\]/g,"<img src='/face/emoji1/$1.gif' />");
        str = str.replace(/\[em_([0-9]*)\]/g,"<img src='/face/emoji2/$1.png'  />");
        str = str.replace(/\[other_([0-9]*)\]/g,"<img src='/face/emoji3/$1.png' />");
        return str;

    }

</script>
</html>